// src/app/users/[id]/page.js
interface Geo {
  lat: string;
  lng: string;
}

interface Address {
  street: string;
  suite: string;
  city: string;
  zipcode: string;
  geo: Geo;
}

interface Company {
  name: string;
  catchPhrase: string;
  bs: string;
}
//  定义了一个 User 类， 然后注意 address 也是一个对象，同理 company 也是一个对象
interface User {
  id: number;
  name: string;
  username: string;
  email: string;
  address: Address;
  phone: string;
  website: string;
  company: Company;
}

interface Props {
  params: { id: string };
}
// Next.js 会自动把路径参数传给组件的 params 属性
// 这相当于 Java 的 public String getUser(@PathVariable String id)
async function fetchUser(id: string): Promise<User> {
  const response = await fetch(
    `https://jsonplaceholder.typicode.com/users/${id}`,
    { cache: "no-store" }
  );
  // 检查响应是否成功
  if (!response.ok) {
    // 抛出错误，Next.js 会自动处理为 404 或 Error Page
    throw new Error("Failed to fetch user");
  }
  const data: User = await response.json();
  return data;
}

export default async function UserDetailPage({ params }: Props) {
  // 在 Next.js 15+ 中，params 需要被 await (如果是旧版本不需要，但这样写最安全)
  const { id } = await params;

  const user = await fetchUser(id);
  console.log(user);
  return (
    // p-8 : padding 8px  bg-white : 背景色为白色  shadow-lg : 阴影
    <div className="p-8 bg-white shadow-lg rounded-xl max-w-lg mx-auto mt-10">
      {/* text-3xl: 字体大小3xl; font-bold: 粗体; mb-4: margin-bottom 4 */}
      <h1 className="text-3xl font-bold mb-4 text-blue-700">
        用户 档案（API 数据）
      </h1>
      {/* 边框和分隔线 */}
      <div className="border-t pt-4 space-y-3">
        {/* flex items-center: 弹性布局并垂直居中 */}
        <p className="flex items-center text-gray-700">
          <strong className="w-20 font-semibold text-gray-900">ID:</strong>{" "}
          {user.id}
        </p>
        <p className="flex items-center text-gray-700">
          <strong className="w-20 font-semibold text-gray-900">姓名:</strong>{" "}
          {user.name}
        </p>
        <p className="flex items-center text-gray-700">
          <strong className="w-20 font-semibold text-gray-900">用户名:</strong>{" "}
          {user.username}
        </p>
        <p className="flex items-center text-gray-700">
          <strong className="w-20 font-semibold text-gray-900">邮箱:</strong>{" "}
          {user.email}
        </p>
        <p className="flex items-center text-gray-700">
          <strong className="w-20 font-semibold text-gray-900">电话:</strong>{" "}
          {user.phone}
        </p>
        <p className="flex items-center text-gray-700">
          <strong className="w-20 font-semibold text-gray-900">网站:</strong>{" "}
          {user.website}
        </p>
        <p className="flex items-center text-gray-700">
          <strong className="w-20 font-semibold text-gray-900">地址:</strong>{" "}
          {user.address.street}, {user.address.suite}, {user.address.city},{" "}
          {user.address.zipcode}
        </p>
        <p>
          <strong className="w-20 font-semibold text-gray-900">
            地理位置:
          </strong>{" "}
          纬度 {user.address.geo.lat}, 经度 {user.address.geo.lng}
        </p>
        <p>
          <strong className="w-20 font-semibold text-gray-900">公司:</strong>{" "}
          {user.company.name} - {user.company.catchPhrase}
        </p>
      </div>
    </div>
  );
}
